<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	width: 1300px;
	height: 500px;
	border: solid black;
	margin: 75px auto;
	/* background-color: black; */
}

#a4 {
	text-align: center;
	/* background-color: red; */
}
</style>
</head>
<body>
	<input type="range" value="0" min="0" max="255" id="id1"
		onclick="color();" onmousemove="color();">
	<font id="a1">0</font>
	<br>
	<input type="range" value="0" min="0" max="255" id="id2"
		onclick="color();" onmousemove="color();">
	<font id="a2">0</font>
	<br>
	<input type="range" value="0" min="0" max="255" id="id3"
		onclick="color();" onmousemove="color();">
	<font id="a3">0</font>
	<br>
	<hr>
	<input type="submit" value="重置" onclick="color2()">
	<button id="a5" onclick="color1();">随机</button>
	<h2 id="a4" onclick="color1();">今天风真大</h2>
	<div id="div1" onclick="color1();"></div>
	<script type="text/javascript">
		function color() {
			red = a1.innerHTML = id1.value;
			green = a2.innerHTML = id2.value;
			blue = a3.innerHTML = id3.value;
			div1.style.backgroundColor = "rgb(" + red + "," + green + ","
					+ blue + ")";
			a4.style.color = "rgb(" + red + "," + green + "," + blue + ")";
		}
		function color1() {
			var red = Math.floor(Math.random() * 256);
			var green = Math.floor(Math.random() * 256);
			var blue = Math.floor(Math.random() * 256);
			div1.style.backgroundColor = 'rgb(' + red + ',' + green + ','
					+ blue + ')';
			a1.innerHTML = id1.value = red;
			a2.innerHTML = id2.value = green;
			a3.innerHTML = id3.value = blue;
			a4.style.color = "rgb(" + red + "," + green + "," + blue + ")";
		}
		function color2() {
			a1.innerHTML = id1.value = red = 0;
			a2.innerHTML = id2.value = green = 0;
			a3.innerHTML = id3.value = blue = 0;
			div1.style.backgroundColor = 'rgb(' + red + ',' + green + ','
					+ blue + ')';

		}
	</script>
</body>
</html>